<!-- 当前实体店活动 -->
<template>
	<view>
		<view class="subscribe" :style="{'background-image': 'url(' + detailimg + ')'}">
			<view class="">
				<!-- {{detailname}} -->
			</view>
			<view class="addbox" v-if="isubscribe">
				<view class="addsubsc">
					已订阅
				</view>
			</view>
			<view class="addbox" @click="subsuc(1)" v-else>
				<view class="addsubsc">
					+订阅
				</view>
				<!-- <view class="">
					送20金币
				</view> -->
			</view>
		</view>
		<!-- 轮播图 -->
		<view v-if="banners.length > 0" class="moturnover">
			<app-swiper :list="banners" borderRadius="32" mode="rect" name="icon_url" :height="328" :autoplay="true">
			</app-swiper>
		</view>
		<view class="moturnover" v-if="banners.length > 0">
			<view class="moturnover-bottom" v-for="(item,index) in banners" :key="index" v-if="index == 0"
				@click="jump(item.url)">
				<image :src="item.icon_url" mode="widthFix"></image>
				<view class="title u-line-1">
					{{item.name}}
				</view>
			</view>
			<view class="moturnover-top">
				<view class="moturnover-item" v-for="(item,index) in banners" :key="index" v-if="index > 0 &&index < 3"
					@click="jump(item.url)">
					<image :src="item.icon_url"></image>
					<view class="title u-line-1">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="moturnover" v-if="banners.length > 0">
			<view class="moturnover-bottom" v-for="(item,index) in banners" :key="index" v-if="index == 0"
				@click="jump(item.url)">
				<image :src="item.icon_url" mode="widthFix"></image>
				<view class="title u-line-1">
					{{item.name}}
				</view>
			</view>
			<view class="moturnover-top">
				<view class="moturnover-item" v-for="(item,index) in banners" :key="index" v-if="index > 0 &&index < 3"
					@click="jump(item.url)">
					<image :src="item.icon_url"></image>
					<view class="title u-line-1">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="moturnover" v-if="banners.length > 0">
			<view class="moturnover-bottom" v-for="(item,index) in banners" :key="index" v-if="index == 0"
				@click="jump(item.url)">
				<image :src="item.icon_url" mode="widthFix"></image>
				<view class="title u-line-1">
					{{item.name}}
				</view>
			</view>
			<view class="moturnover-top">
				<view class="moturnover-item" v-for="(item,index) in banners" :key="index" v-if="index > 0 &&index < 3"
					@click="jump(item.url)">
					<image :src="item.icon_url"></image>
					<view class="title u-line-1">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="list-one">
			<view class="list-one-item" v-for="(child,childindex) in goods_list" :key="childindex"
				@click="toshopdetail(child.page_url)">
				<image class="image" :src="child.cover_pic" mode=""></image>
				<text class="u-line-2">{{child.name}}</text>
			</view>
		</view>
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx">
			<image :lazy-load="true" @click="backTop" class="quick-btn" src="/static/image/icon/back-top.png"
				v-if="opacity == 1"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'

	let conti = false
	export default {
		components: {
			appSwiper
		},
		data() {
			return {
				mall_id: 0,
				// 是否订阅成功
				isubscribe: false,

				detailname: '',
				detailimg: '',
				banners: [],
				goods1: [],
				goods2: [],
				goods3: [],
				goods_list: [],
				page: 1,
				page_count: 1,

				// 返回顶部
				top: 280,
				scrollTop: 0,
				opacity: 0,
				keywords: '',

				lowestid: 0
			}
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			}
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				storemall: state => state.malid.apimaUrl
			}),
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if (this.page < this.page_count && conti) {
				this.page++
				// if (this.lowestid != 0) {
				this.allLiveReq(this.lowestid)
				// } else {
				// 	this.request()
				// }
			}
		},
		onLoad(options) {
			// 11.29
			this.mall_id = options.mall_id || 1
			this.$store.dispatch('malid/actionSetMallId', this.mall_id)

			// 获取实体店详情
			this.loadDetail()
			// 判断是否订阅
			this.subsuc(2)
		},
		methods: {
			// 实体店详情 只获取名字
			loadDetail() {
				let url = this.storemall.entity.detail
				this.$request({
					url: url,
					data: {
						id: this.mall_id
					}
				}).then(res => {
					if (res.code == 0) {
						this.detailname = res.data.detail.name
						this.detailimg = res.data.detail.catlink.option2.cateinfo[0].icon_url
						this.oneofReq('options4')
						// this.request()
						uni.setNavigationBarTitle({
							title: this.detailname
						})
					}
				})
			},
			// type = 2 判断是否订阅 type = 1 发送订阅请求
			subsuc(type = 1) {
				let url = this.storemall.entity.subscribe
				let fodata = {
					mch_id: 0,
					mall_id: this.mall_id,
				}
				this.$request({
					url: url,
					data: {
						formdata: JSON.stringify(fodata),
						type: type
					},
					method: 'post'
				}).then(res => {
					if (type == 1) {
						if (res.code == 0) {
							this.isubscribe = true
						}
					} else if (type == 2) {
						if (res.msg == '关注成功') {
							this.isubscribe = true
						} else {
							this.isubscribe = false
						}
					}
				})
			},
			// 实体店每个模块的内容
			oneofReq(keyword) {
				this.$request({
					url: this.storemall.entity.navague,
					data: {
						keyword: keyword
					}
				}).then(res => {
					this.banners = res.data.list[0].subnav
					this.goods1 = res.data.list[1].subnav
					this.goods2 = res.data.list[2].subnav
					this.goods3 = res.data.list[3].subnav
					// if (res.data.list[4]) {
					this.lowestid = res.data.list[4].id
					this.allLiveReq(this.lowestid)
					// } else {
					// 	this.request()
					// }
				})
			},
			allLiveReq(pid) {
				this.$request({
					url: this.storemall.navs.list,
					data: {
						pid: pid,
						status: 1,
						limit: 10,
						page: this.page
					}
				}).then((res) => {
					if (res.code == 0) {
						this.goods_list = this.goods_list.concat(res.data.list)
						this.page_count = res.data.pagination.page_count
					}
				}).catch(() => {

				})
			},
			// 11.29
			async request() {
				// this.$showLoading();
				conti = false
				const res = await this.$request({
					url: this.storemall.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: 0,
						sort: 1,
						sort_type: 1,
						keyword: '',
						coupon_id: 0,
						sign: '',
						is_sales: 1
					}
				});
				if (res.code === 0) {
					conti = true
					// this.$hideLoading();
					this.page_count = res.data.pagination.page_count;
					this.goods_list = this.goods_list.concat(res.data.list)
				} else {
					conti = true
					// this.$hideLoading();
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			// 11.29
			toshopdetail(item) {
				let url = item
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (item.indexOf('?') != -1) {
					url = item + '&mall_id=' + this.mall_id
				} else {
					url = item + '?mall_id=' + this.mall_id
				}
				uni.navigateTo({
					url: url
				})
			},
			jump(item) {
				let url = item
				if (url == '' || url == 'javascript:;' || url == '/') {
					return
				}
				if (item.indexOf('?') != -1) {
					url = item + '&mall_id=' + this.mall_id
				} else {
					url = item + '?mall_id=' + this.mall_id
				}
				uni.navigateTo({
					url: url
				})
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.sixheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		height: 120rpx;
		align-items: center;
		justify-content: space-between;
		z-index: 666;
		font-size: 28rpx;
		box-shadow: 0 0 20rpx -12rpx black;
		padding: 0 25rpx;

		.left-arrow {
			width: 24rpx;
			// height: 45rpx;
			height: 32rpx;
			margin-right: 24rpx;
		}

		.flex {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 24rpx 0;
			height: 120rpx;

			.sitem {
				height: 72rpx;
				line-height: 72rpx;
				font-size: 28rpx;

				.seaimg {
					width: 36rpx;
					height: 36rpx;
					margin: 18rpx auto;
					// width: 52rpx;
					// height: 52rpx;
					// margin: 10rpx auto;
				}
			}

			.fitem {
				margin-left: 12rpx;
				// margin-left: 20rpx;
				color: #ff2600;
			}

			.item {
				// width: 100rpx;
				height: 72rpx;
				line-height: 72rpx;
				position: relative;
				text-align: center;
				font-size: 28rpx;
				padding: 0 24rpx;
				font-weight: 600;

				&.active:before {
					position: absolute;
					bottom: 0;
					left: 0;
					content: '';
					font-weight: 500;
					background: #342B2A;
					border-radius: 4rpx;
					width: 80rpx;
					left: 50%;
					transform: translateX(-50%);
					height: 8rpx;
				}
			}
		}
	}

	.subscribe {
		// width: 708rpx;
		width: 750rpx;
		margin: 0 auto 24rpx;
		display: flex;
		justify-content: space-between;
		height: 238rpx;
		// padding: 24rpx;
		// align-items: center;
		// padding: 24rpx 0;
		// height: 224rpx;
		// color: #F7F7F7;
		color: #ff0000;
		text-align: center;
		font-size: 28rpx;
		background-size: 100% 100%;
		// background-color: #353535;
		background-color: #FFFFFF;
		// border-radius: 24rpx;
		border: 2rpx solid #77370b;

		&.subfixed {
			position: fixed;
			background-size: 100% 100%;
			background-color: #353535;
			top: 24rpx;
			left: 21rpx;
			z-index: 9777;
			border-radius: 24rpx;
		}

		.addbox {
			padding: 8rpx;
		}

		.addsubsc {
			// border: 1rpx solid #F7F7F7;
			// padding: 6rpx;
			background: #d6d6d6;
			border-radius: 56rpx;
			font-size: 28rpx;
			font-weight: bold;
			padding: 6rpx 24rpx;
		}
	}


	.moturnover {
		width: 708rpx;
		margin: 24rpx auto;

		.moturnover-top {
			width: 100%;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.moturnover-item {
				width: 328rpx;

				// height: ;
				image {
					width: 328rpx;
					height: 328rpx;
				}
			}
		}

		.moturnover-bottom {
			width: 100%;
			margin: 20rpx auto;

			image {
				width: 100%;
			}
		}

		.title {
			height: 72rpx;
			line-height: 36rpx;
			padding: 10rpx 16rpx;
			color: rgba($color: #000000, $alpha: 0.84);
			font-size: 24rpx;
			font-weight: 600;
		}
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}

	.list-one {
		width: 708rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 328rpx;
			height: 426rpx;
			font-size: 28rpx;
			margin: 24rpx 0;

			.image {
				width: 328rpx;
				height: 328rpx;
			}
		}
	}
</style>
